import { createStore } from 'vuex'
import createPersistedstate from "vuex-persistedstate"
import Cookie from "js-cookie"
export default createStore({
  // 存储状态
  state: {
    loginUserInfo: null,
    token: null
  },
  // 改变状态
  mutations: {
    setLoginUserInfo(state, loginUserInfo) {
      state.loginUserInfo = loginUserInfo;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  // 提交状态改变
  actions: {
    setLoginUserInfo({ commit }, loginUserInfo) {
      commit("setLoginUserInfo", loginUserInfo)
    },
    setToken({ commit }, token) {
      commit("setToken", token);
    },
    // 退出登录，把之前的登录信息清空
    setLogOut({ commit }) {
      commit("setLoginUserInfo", null);
      commit("setToken", null);
    }
  },
  // 相当于计算属性
  //getters除了计算属性的功能，还有一个好处是，如果取值的时候发现没有值，
  // 会尝试到缓存里面取值，从缓存当中取值是因为加载了vuex-persistedstate插件
  getters: {
    loginUserInfo(state) {
      return state.loginUserInfo;
    },
    token(state) {
      return state.token;
    }
  },
  plugins: [
    // 可以加载很多插件，如异步转同步插件，如持久化插件
    createPersistedstate({
      // 后期还可以使用web-storage-cache框架
      storage: {
        getItem: key => Cookie.get(key),
        setItem: (key, value) => Cookie.set(key, value, { expires: 30 }),
        removeItem: key => Cookie.remove(key)
      }
    })
  ]
})
